import React, { useContext, ReactNode, Children, useState, useEffect } from "react";
import type { NodeGraphViewRenderContext } from "./NodeGraphViewRenderContext";
import { NODE_BORDER_RADIUS, NODE_ELEM_HEIGHT, NODE_ELEM_MARGIN, NODE_PADDING, NODE_ROUNDING } from "./NodeViewConfig";
import { NodeViewContext } from "./NodeViewContext";
import { NodeViewReportContext } from "./NodeViewReportContext";

interface _Props {
    children: ReactNode
}

export interface INode {
    render: (ctx: NodeGraphViewRenderContext) => React.JSX.Element;
}

export function NodeView(props: _Props) {
    const ctx = useContext(NodeViewContext);

    let paddingX = ctx.relX + NODE_PADDING;
    let paddingY = ctx.relY + NODE_PADDING;
    let contentWidth = ctx.width - 2 * NODE_PADDING;
    let contentHeight = ctx.height - 2 * NODE_PADDING;

    let _maxWidth = 0;

    const [widthState, setWidthState] = useState(contentWidth)

    return (
        <>
            <rect height={ctx.height} width={ctx.width} x={ctx.relX} y={ctx.relY}
                fill="transparent" stroke="black"
                rx={NODE_BORDER_RADIUS} ry={NODE_BORDER_RADIUS}>
            </rect>

            {Children.map(props.children, (child, index) => {
                return (<NodeViewContext.Provider value={{
                    relX: paddingX,
                    relY: paddingY + (NODE_ELEM_HEIGHT + NODE_ELEM_MARGIN) * index,
                    height: contentHeight,
                    width: contentWidth
                }}>
                    {child}
                </NodeViewContext.Provider>)
            })}
        </>
    )
}
